---
sidebar_position: 1
description: Guide dedicated to installation process
keywords:
  [
    react-native-keyboard-controller,
    react-native keyboard,
    installation,
    setup,
    keyboard handling,
    keyboard animation,
    keyboard movement,
    troubleshooting,
  ]
---

import Tabs from "@theme/Tabs";
import TabItem from "@theme/TabItem";

# Installation

## Adding a library to the project

Install the `react-native-keyboard-controller` package in your React Native project.

<Tabs>
<TabItem value="yarn" label="YARN" default>

```shell
yarn add react-native-keyboard-controller
```

</TabItem>
<TabItem value="npm" label="NPM">

```shell
npm install react-native-keyboard-controller --save
```

</TabItem>
<TabItem value="expo" label="EXPO">

```shell
npx expo install react-native-keyboard-controller
```

</TabItem>
</Tabs>

:::warning Mandatory `react-native-reanimated` dependency

This library requires `react-native-reanimated` to work properly. If you don't have it in your project, you need to follow [installation guide](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/getting-started/#installation) and install it in your project before using this library.
:::

### Linking

This package supports [autolinking](https://github.com/react-native-community/cli/blob/master/docs/autolinking.md).

:::tip Pods update

After adding the package don't forget to **re-install** `pods` and **re-assemble** `android` and `ios` applications, since this library contains native code.

If you still experience issues like **package doesn't seem to be linked** try performing a [fresh build](https://github.com/kirillzyusko/react-native-keyboard-controller/issues/786#issuecomment-2741464142) to clear any outdated cache.
:::

## Adding provider

In order to use it you'll need to wrap your app with `KeyboardProvider` component.

:::info Why it's needed?

If you are bothered why it's needed, you can read more about it in [architecture](./recipes/platform-differences.md) deep dive to understand all aspects of how this library works.

:::

```tsx
import { KeyboardProvider } from "react-native-keyboard-controller";

export default function App() {
  return (
    <KeyboardProvider>
      {/* your main application code goes here */}
    </KeyboardProvider>
  );
}
```

Congratulations! 🎉 You've just finished installation process. Go to the [next section](./guides/first-animation.md) to get more insights of what you can do using this library. 😎

:::warning Flickering keyboard on app start
`KeyboardProvider` preloads the keyboard when the app starts to avoid an initial delay later. However, in some situations, this may cause the keyboard to [briefly appear](https://github.com/kirillzyusko/react-native-keyboard-controller/issues/1077) on launch.

To prevent this, disable preloading by setting the [`preload={false}`](./api/keyboard-provider#preload-) prop on `KeyboardProvider`. And don't forget to manually [`preload`](./api/keyboard-controller#preload-) the keyboard later via `KeyboardController` when appropriate.
:::

:::danger Troubleshooting guide
If you encounter some issues make sure to read the [Troubleshooting](./troubleshooting.md) section.
:::
